Here is a small tip about something that made a great difference in managing a project from scratch.

To give you a bit of context, when I joined Antarctica, the team followed a monthly sprint process.

The tasks were defined by the Product Manager (PM) every Monday for the entire week, and a scrum call would be scheduled every Friday to take an update on the tasks performed throughout the week. 

The development team and other departments like QA and Infra had only one opportunity to understand the tasks to be performed in the week and even to bring up any mishaps from the previous week. The team would try and register as much information as they could from the one and only meeting held on Monday and then without any direction or a lot of communication, try and finish those tasks by Friday. 

This method led to a lot of inconsistency and vulnerability amongst the team member as they felt misguided. Specifically:

As I started learning about the work culture and individual capacity of every member, as well as the sense of responsibility and commitment that each member had for the on-going projects, and studying the old process of running the different projects thoroughly, it became very clear to me that in order to make the management process of the organisation more efficient, it was very important to interact with the team on a daily basis. 

I therefore started by scheduling daily stand-up meetings, and the results blew my mind.

I also realised that, as important as the daily stand-up meetings were, we also had to start running daily scrums at the end of the day in order to take updates on the tasks assigned at the start of the day on the stand-up calls. This&nbsp;brought an incredible level of productivity to the different teams as they now had more clarity and the entire process was more transparent.&nbsp;

To improve progress tracking, we also started breaking down all projects and monitoring them on a weekly basis (sprints). This change reduced sprint duration from a month to a week, enabling us to define weekly milestones and proactively identify any projects veering off track. This approach allowed us to be more transparent and keep a better control of the project at any given time.

How the new process helped Antarctica stakeholders:

Ever since this process was implemented, there has been tremendous change in the workings of the organisation. We have completed and delivered multiple projects perfectly on schedule, back-to-back. This has also resulted in improved team&nbsp;morale, as this process gives clarity to everyone and removes any kind of insecurity and confusion related to work.

Here is a small tip about project management that made a great difference in my product quality.

sprint planning.png

Daily Stand Up & Scrum Meeting • The Best Way to run a Weekly Sprint.

Ebrahim Kothari

Sending your First Request through
Postman

Postman enables you to create and send API requests.

You can send a request to
an endpoint, retrieve data from a data source, or test an API's functionality.


You don't need to enter commands in a terminal or write any code. 

All you have to do is to create a new
request and select&nbsp;Send, and the API response appears right inside
Postman.

APIs provide a structured way for one application
to access the capabilities of another application. Typically, this
communication happens over the internet by way of an API server. A client
application (like a mobile app) sends a request to the server, and after the
request processes the server returns a response to the client.

A request includes the URL of the API endpoint and
an HTTP request method. The method indicates the action you want the API to
perform. Here are some of the most common methods:

When you're ready, open Postman and send your first
request.

Postman displays the response data sent from the
server in the lower pane.

In this example, Postman is acting as the client
application and is communicating with an API server. Here's what happened when
you selected&nbsp;Send:

Now that you've sent your first request, you're
ready to do more with Postman! 

You can send more requests to the Postman
Echo API, a handy tool you can use to test API requests in Postman.&nbsp;

You can also send ME requests for any help you require, I'll be happy to assist you!

Postman enables you to create and send API requests.
And that's pretty cool!

Sending Your First Request Through Postman

Postman Request Antarctica Global.png

Sending your First Request through Postman

Nutan Gaikwad

Conditional rendering is a powerful tool for creating dynamic and engaging user interfaces in React applications. 

You can use it to control what content is rendered and when. It improves user experience, simplifies your code, and helps you create more flexible and adaptable components.

Why is conditional rendering necessary in React?

There are several reasons why you might want to use conditional rendering in your React applications:

Improved User Experience: Conditional rendering allows you to create dynamic user interfaces that adapt to changes in data and user interactions. By showing and hiding content based on the user's actions or the application state, you can create a more intuitive and engaging user experience.

Improved Performance: By conditionally rendering content, you can avoid rendering unnecessary components and improve the performance of your application. This is particularly important in larger applications where unnecessary rendering can lead to performance issues.

Simplified Code: Conditional rendering can help you simplify your code and make it more readable. By using conditional statements to decide what content should be rendered, you can avoid duplicating code and create more modular components.

Flexibility: Conditional rendering allows you to create more flexible and customizable components. By rendering different content based on the application state, you can create components that can be used in different contexts and adapt to different user interactions

Conditional rendering can performed using two methods:

mediaLibraryStrapi

In the above code, if `isLoggedIn` returns a true value, then `Welcome back!` message will be displayed and if it returns false then “Please sign up” will be displayed.

As you can see, if `isLoggedIn` returns a true value, then and then only the `Welcome back!` message will be displayed on the screen. If `isLoggedIn` returns a false value then no message will be displayed.

Advantages of using Ternary operator over logical AND operator in conditions rendering

Unexpected output: If the second operand of the &amp;&amp; operator is not a valid React element or a boolean value, the output may be unexpected. For example, if the second operand is a string or a number, it will be rendered as text instead of a React element.

Rendering nothing vs. false: If the condition being checked is false, the &amp;&amp; operator will return false instead of rendering nothing. This can lead to unexpected behaviour if you are not careful.

Readability: The &amp;&amp; operator can be difficult to read in some cases, especially if the condition being checked is complex or if you need to render multiple elements based on the condition.

Maintainability: If you need to modify the condition being checked, you may need to modify the &amp;&amp; operator in multiple places, which can make the code harder to maintain.

To avoid these issues, make sure that the second operand of the &amp;&amp; operator is a valid React element or a boolean value, and consider using the ternary operator if the condition is complex or if you need to render multiple elements based on the condition.

I'm Kevin, a fullstack MERN developer at Antarctica Global. I post regularly about various technologies &amp; experiences I come across.

Feel free to comment this post and ask me any question!

Conditional rendering is a powerful tool for creating dynamic and engaging user interfaces in React applications. You can use it to control what content is rendered and when, and it improves user experience, simplifies your code, and helps you create more flexible and adaptable components.

Conditional Rendering  React Antarctica Global.png

Conditional Rendering in React

Kevin Shah

I see life as a film and film as my life. 

My mom introduced me to films at a young age, since then, cinema has played a significant role in my life, igniting my creativity and curiosity. As a kid, I spent most of my time engrossed in watching movies more than anything else. The compelling stories and emotions of the characters and the pressing question of how people achieve what they do behind the scenes, was what drew me towards films in the first place.

I see life as a film and film as my life.

I believe visual communication and storytelling represent an endless spectrum of possibilities that we as children imagined but forgot to live as adults. So when the time came to pick a profession for myself, I leaned on my long time passion for cinema and Arts and chose Animation Design as my Undergraduate program. Being someone who could never stop reading fiction, combined with the ability to bring my imagination to life is a skill I gained, for which I am very grateful and do not take for granted.

But how does one make use of this storytelling ability in the UI UX space? 

At Antarctica, I realized that user experience and storytelling aren’t all that different. 

User journey maps, for instance, are a sort of storytelling used in UX. 

Just as every novel has an exposition, action, climax, and conclusion, so does a user journey map. It starts by creating a timeline out of a sequence of user actions in its most basic form.

The timeline is then enhanced with the users thoughts and emotions to develop a narrative. This narrative is condensed and polished, ultimately leading to a visualization.&nbsp;

The field of illustration is at once highly visible while being invisible. 

Simply put, illustration is the visual imagery that is best known for interpreting, depicting, explaining, and/or decorating the words in books, newspapers, and online media.

In fact, illustrations go far beyond that. Consider even emojis.

The most well-known examples of illustration are the pictures that accompany our favorite books and magazine articles. The field of publication illustration began there, and artists there have created some of the most iconic pictures. 

Illustration truly serves a purpose rather than being a decorative feature. 

It aids in facilitating and enhancing communication and interactions.

Illustration is what ultimately touches our souls and I love that.

User Experience: How storytelling can become an incredibly powerful and effective medium of communication for emotions. 



UI/UX: The Power of Visual Storytelling

Surabhi Warick

At the heart of an efficient SDLC lies the Source Code Management (SCM).

I use&nbsp;<a href="https://git-scm.com/">Git</a> along with Bitbucket&nbsp;for collaboration between our development teams.&nbsp;&nbsp;

A Distributed Version Control System (DVCS) has been a crucial component for successful collaboration among developers. While there have been many utilities developed for SCM (SVN, Fossil, Git) through the last few decades, Git became the most preferred by developers. The credibility of this specific tool has been proven by multiple open source projects, specifically due to the Linux kernel for which it was developed by Linux Torvalds. Not to mention that GitHub itself -&nbsp;The Source Code Management service - uses Git at its core and has made it easy for new developers and open-source projects to adopt it.

I am going to walk you through the most commonly used Git commands using a workflow.

This guide includes certain git commands along with their explanation of what it does along a workflow.

A git project begins with a directory initiation where the source code is stored.

<code class="inline-code">$ cd path/to/project_directory</code>

After few files have been added to the project directory, these new files have to be added to git to be tracked for changes

<code class="inline-code">$ git add server.js app.js</code>

If many more files have been added to the directory and you want to add all of them for git to track for changes use the below command

Once the files are added, these files have to be committed to git so that you can track what changes were made when

<code class="inline-code">$ git commit -m “Adding app.js for initial project configuration”</code>

The above method is a way of writing short commit messages.&nbsp;

You may write a commit message with a lot of description for the changes you have made with the below command.

This command would not work if you have already made the commit with short message from above

<code class="inline-code">$ git commit</code>

Once the commit message has been added it is time to push the repository to the SCM so other developers can pull and work on the project too.

To push the changes to a Source Code Management service you will have to sign up to a service similar to Bitbucket, Github or Gitlab.

For advancing this guide I am using the bitbucket for SCM.

<code class="inline-code">$ git remote -v</code>

For adding a remote repository which has been created at bitbucket you would have a similar URL repo for your bitbucket repository.

<code class="inline-code">$ git remote add origin https://bitbucket-username@bitbucket.org/bitbucket-workspace/your -project-repo.git</code>

The previous section of git is good enough to get you started with pushing code. 

The real-world workflow often includes code moving through different branches.

As per the above diagram, the workflow is:

This is how the flow of the code would be using commands

<code class="inline-code">$ git branch -v</code>

Creating new branch from the current branch

<code class="inline-code">$ git checkout -b feature_auth</code>

If a local branch already exists, the developer would simply have to switch/checkout the branch

<code class="inline-code">$ git checkout feature_auth</code>

Once the changes have been made to the local branch, add the files and commit these changes.

<code class="inline-code">$ git commit -m “Feat: initial authentication commit”</code>

Pushing the changes to centralised bitbucket repository

If the previous command fails, since this is a new branch then this new branch information must be pushed to the central repository.

Here are all Three commands which do this but maybe outdated according to the git version.

<code class="inline-code">$ git push --set-upstream origin feature_auth</code>

<code class="inline-code">$ git push --set-upstream-to origin feature_auth</code>

<code class="inline-code">$ git push -u origin feature_auth</code>

Now the local branch named feature_auth is to be merged into the develop branch.

This is an example of how a one branch is merged into another branch but in real-world workflow a lot of branches will be merging into this develop branch

Once all the commits have been made to local branch, switch/checkout to develop branch

<code class="inline-code">$ git checkout develop</code>

Once switched/checkout to develop branch merge the local branch

<code class="inline-code">$ git merge feature_auth</code>

In the real-world you won’t be doing branch merges through a command. It will be done using PR (Pull Request) which is how SCMs manage merges for collaboration.&nbsp;

Instead of doing a “git merge” of feature_auth to develop, you would be raising a Pull request for merging feature_auth to develop.

This PR is reviewed and then merged to the target branch from a centralized SCM service like Bitbucket or Github.

While you have been working on your project you can view the changes between your work and the previous commits

Listing all of your commits shows you the commit hash (hexadecimal), Author, Date and Commit message

See the changes made between Two different commits&nbsp;

The format of changes displayed by git diff includes

There is a possibility of different collaboration workflows depending on how organizations are set up. A git repository could be used by a single team or multiple teams in case of an open-source repository.

A developer working on the project would go through these processes

1. Clone an existing project’s git repository

The Complete Git guide - Using git for development

The Complete Git Guide by Sachin Dey from Antarctica Global

gitguidebysachinantarcticaglobal.png

The Complete Git Guide

Sachin Dey

Are you wondering how event-driven architecture can be implemented using Node.js and Kafka?

Event-driven architecture is a software design pattern that emphasizes the production, detection, consumption, and reaction to events.

Events can be any occurrence that can be detected and that may be significant to the system or the business. They can be generated by users, sensors, or other systems, and can be processed asynchronously by one or more components of the system.

In an event-driven architecture, components are decoupled from each other, and communicate only through events. This allows for greater flexibility and scalability, as different components can be developed and deployed independently, and can handle different types of events.

Apache Kafka is a distributed streaming platform that is designed to handle high volumes of data in real-time.

Kafka can be used to store, process, and distribute large volumes of events or messages, and can be integrated with a wide range of applications and data sources.

Kafka is built around a publish-subscribe model, where producers publish events to topics, and consumers subscribe to those topics to receive and process the events. Kafka provides features such as scalability, fault-tolerance, and high throughput, making it a popular choice for implementing event-driven architectures.

Implementing Event-driven Architecture with Node.js and Kafka

Node.js is a popular JavaScript runtime that can be used to build event-driven applications.

Node.js provides an event-driven architecture based on the EventEmitter class, which allows developers to define custom events and event handlers.

Here are the basic steps for implementing an event-driven architecture with Node.js and Kafka:

&nbsp; &nbsp; &nbsp;1. Define the events

First, you need to identify the events that are relevant to your system or business. These can be anything from user actions, sensor readings, or system events. Once you have identified the events, you can define them using the EventEmitter class in Node.js

&nbsp; &nbsp; &nbsp;2. Produce the events

Next, you need to produce the events and publish them to Kafka topics. To do this, you can use a Kafka producer library for Node.js, such as kafka-node or node-rdkafka. The producer library will handle the details of connecting to Kafka, publishing the events to the appropriate topics, and handling errors and retries.

&nbsp; &nbsp; &nbsp;3. Consume the events

Once the events have been published to Kafka topics, you need to consume them and process them in your application. To do this, you can use a Kafka consumer library for Node.js, such as kafka-node or node-rdkafka. The consumer library will handle the details of connecting to Kafka, subscribing to the appropriate topics, and handling message delivery and partitioning.

&nbsp; &nbsp; &nbsp;4. React to the events

Finally, you need to define event handlers that will react to the events and perform the necessary actions. These event handlers can be defined as functions in your Node.js application, and can be triggered by the Kafka consumer library when new events are received.

Benefits of Event-driven Architecture with Node.js and Kafka

Implementing an event-driven architecture with Node.js and Kafka has several benefits, including:

Event-driven architecture with Node.js and Kafka is a powerful approach to building scalable, decoupled, and flexible systems.

By using Kafka as a distributed streaming platform, and Node.js as a runtime for event processing, you can easily build applications that can handle large volumes of data in real-time, and respond quickly to changes in your business or system.

Whether you are building a microservices architecture, a real-time analytics platform, or a complex event-driven system, using Node.js and Kafka can help you achieve greater agility, scalability, and resilience, and deliver more value to your users and customers.

Event-driven architecture (EDA) is a powerful approach to designing and building scalable, decoupled, and flexible systems. With EDA, systems can respond to events as they occur, rather than relying on tightly coupled, synchronous interactions between components. This approach can help organizations achieve faster time-to-market, greater agility, and improved scalability.

Event Driven Architecture by Preetinder Kalsi

eventdrivenarchitecture.png

What is Event Driven Architecture ?

Preetinder Kalsi

Becoming a full stack developer can be a real “search in the dark” for few people, especially when you are new to web development. With the need for mastering technologies over various domains, where to start and how to proceed are commonly asked questions by rookies. This article is about my journey of becoming a full stack developer.

I started my professional journey as a SAP ABAP Tester. Still fresh out of college, I took this as a new challenge which excited me quite a lot. But I used to always get fascinated by the web development domain. I would see these beautiful websites and relevant integrations and I would admire them like a kid admiring a candy. So eventually, after the admiration phase, came the “I want to be a developer” phase.

Yes, bottom. Although I had some amount of knowledge in HTML and CSS technologies, to be a professional developer, I had to be at par with the industry standards. This meant that I would have to study all relevant concepts as well as have practical knowledge.

So I began with HTML and CSS, again. But this time, with proper resources and by building static websites for all the concepts I learnt. (practical implementation is the most important part). After getting comfortable with these concepts, I went to the main heart of web development - Javascript Language. Since I had Java and Python language in my undergrad curriculum, understanding Javascript became&nbsp; a little easy. The core concepts in every coding language are quite similar and they mainly differ in syntax.

Here are the resources which helped me in my learning process:

Next in line was the Frontend development. 

There are various libraries and frameworks which help you in the frontend development. My target was to become a MERN Stack developer which comprises of MongoDB, Express.js, React and Node.js.&nbsp;

Order in which you should go about React :

Once I got comfortable with building static pages and using React concepts of hooks and functional components, it was time to integrate and connect the APIs. 

Node.js is a powerful technology when we talk about backend. 

It allows you to build complex and powerful applications without writing complex code (which makes our life easy!)

Order in which you should go about Node.js:

The final piece in our jigsaw puzzle of Fullstack Development is somewhat easier than our previous steps. We have a wide range of databases available in both structured and unstructured databases. I went on to study MySQL and MongoDB since these two databases are most widely used.

After getting well versed with web development, though I didn't have any professional experience, the good folks at Antarctica Global gave me a shot to bring my dream into reality. 

Antarctica Global has a diverse and dynamic team which will always make you feel like you are a part of an extended family. All of my silliest doubts were solved with utmost clarity and nobody ever questioned the magnitude of silly questions. 

Within no time, I started developing functionalities and implementing beautiful UIs. I am forever grateful for this opportunity and am looking forward to expanding my skill sets by being here at Antarctica Global!

I will be here for you in case you want to join our team too!

This article is about my journey of transitioning from QA Testing to becoming a full stack MERN developer!


Kevin Shah

My Journey from QA Tester to Fullstack Developer for a Leading Technology Company

By Kevin Shah

Conditional Rendering in React

By Kevin Shah

My Journey from QA Tester to Fullstack Developer for a...

Kevin Shah

Conditional Rendering in React

Kevin Shah

You may also like!

Kevin Shah

My Journey from QA Tester to Fullstack Developer for a Leading Technology Companylg...

By Kevin Shah

Conditional Rendering in Reactlg...

By Kevin Shah

My Journey from QA Tester to Fullstack Developer for a...

Kevin Shah

Conditional Rendering in React

Kevin Shah

You may also like!

My Journey from QA Tester to Fullstack Developer for a Leading Technology Company

Conditional Rendering in React